<!DOCTYPE html>
<html lang="en">
<head>
<title>订单详情</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="../../staticFile/js/common/mobileCommon.min.js"></script>
<link type="text/css" rel="stylesheet" href="../../staticFile/css/mobile/common.css">
<link type="text/css" rel="stylesheet" href="../../staticFile/css/mobile/mobileTips.css">
<style type="text/css">
body{background-color: #dfdfdf;}
.middle-main{width: 100%;font-size: 0.45rem;}
.top-title{line-height: 0.7rem;padding:0.1rem 0 0.1rem 0;color: #FFFFFF;background: url("../../staticFile/images/userIndex/menu-spacer.gif") right top repeat-x;background-size: 100% 0.9rem;text-align: center;font-weight: bold;width: 100%;}
.middle-main .service-info{width: 88%;background: #FFFFFF;margin: 0.2rem auto 0 auto;padding: 0.4rem;}
.service-info div{line-height: 0.8rem;}
.service-info img{vertical-align: middle;height: 0.45rem;width: 0.45rem;}
.btn{background: url(../../staticFile/images/userIndex/menu-row-tail.gif) center bottom repeat-x;background-size:100% 0.8rem;border: 0;font-size: 0.5rem;width: 2rem;color: white;font-weight: bolder;line-height: 0.7rem;margin-bottom: 0.4rem;}
.issuer-rate{margin-top: 6px;}#btnGroup{text-align: center;margin-top: 0.8rem;}
.order-evaluation-checkbox ul li{width: 2.6rem;border:1px solid #e84c3d;text-align: center;line-height:0.6rem;margin-right: 0.3rem;float:left;overflow: hidden; margin-top: 0.15rem;}
.len-text-field{display: block;margin-top: -0.8rem;}
#wholePhone{float: right;width: 2.2rem;display:none;text-align: center;background: url(../../staticFile/images/userIndex/menu-row-tail.gif) center bottom repeat-x;color: #fff;}
.tip-div{position: fixed;top:0;left:0;width:100%;height:100%;background: rgba(0,0,0,0.2);font-size: 0.6rem;display: none;}
.tip-info{width: 100%;background: #FAFAFC;height: 1.6rem;line-height:1.6rem;position: fixed; top: 25%;text-align: center;}
.star-five {float: left;margin-top:0.2rem;position: relative;display: block;color: #C1BFBF;width: 0px;height: 0px;border-right: 0.33rem solid transparent;border-bottom: 0.23rem  solid #C1BFBF;border-left: 0.33rem solid transparent;-moz-transform:rotate(35deg);-webkit-transform:rotate(35deg);-ms-transform:rotate(35deg);-o-transform:rotate(35deg);}
.star-five:before {border-bottom: 0.26rem solid #C1BFBF;border-left: 0.1rem solid transparent;border-right: 0.1rem solid transparent;position: absolute;height: 0;width: 0;top: -0.15rem;left: -0.22rem;display: block;content: '';-webkit-transform: rotate(-35deg);-moz-transform: rotate(-35deg);-ms-transform: rotate(-35deg);-o-transform: rotate(-35deg);}
.star-five:after {position: absolute;display: block;color: #C1BFBF;top: 0.015rem;left: -0.35rem;width: 0px;height: 0px;border-right: 0.33rem solid transparent;border-bottom: 0.23rem solid #C1BFBF;border-left: 0.33rem solid transparent;-webkit-transform: rotate(-70deg);-moz-transform:rotate(-70deg);-ms-transform:rotate(-70deg);-o-transform:rotate(-70deg);content: '';}
</style>
<script type="text/javascript" src="../../staticFile/js/common/constant.js"></script>
<script type="text/javascript" src="../../staticFile/js/common/commonUtil.js"></script>
<script type="text/javascript" src="../../staticFile/js/plugins/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../staticFile/js/common/mobileTips.js"></script>
<script type="text/javascript" src="../../staticFile/js/common/mobileGlobalAjax.js"></script>
<script type="text/javascript" src="../../staticFile/js/common/getDictionaries.js"></script>
<script type="text/javascript">
var wholePhone = '';
$(function(){
	var url = location.search;
	var params = url.split('?')[1].split('&');
	var oid = params[0].split('=')[1];
	var distance = '天涯海角';
	if(params.length > 1){
        var distanceParam = params[1].split('=')[1];
        if (distanceParam.indexOf('%') < 0) {
            distance = distanceParam + '千米';
        }
	}
	initOrderData(oid,distance);
	var evaluateStarWidth = $('.evaluate-star').width();
    var evaluationCheckWidth = $('.clearfix li').width();
    var surplusWidth = evaluateStarWidth - (evaluationCheckWidth + 2) * 3;
    
    var fieldTextWidth = $('#fieldText').width(),
    lenTextDivWidth = $('#lenTextDiv').width(),
    rem = parseFloat($('html').css('font-size').replace('px',''));
    if (surplusWidth > 0){
        //保证评价小框之间的间隔相同
        surplusWidth = (surplusWidth / 2) / rem + '';
        surplusWidth = surplusWidth.substr(0, surplusWidth.indexOf('.') + 3);
        $('.left-evaluate').css('margin-right', surplusWidth + 'rem');
    }
    $('.len-text-field').css({'margin-left': (fieldTextWidth / rem) + 0.1 + 'rem','width': ((lenTextDivWidth - fieldTextWidth) / rem) + 'rem'});
    
    $('#btnSure').click(function(){
    	$('.tip-div').hide();
    });
    //查看完整电话
    $('#wholePhone').click(function () {
        $('#soPhone').html(wholePhone);
    });
});
/**
 * 初始化订单数据
 */
function initOrderData(oid,distance){
	if(isNull(oid)){
		return;
	}
	$('#distance').text(distance);
	$.ajax({
		type: 'post',
		url: '/app/index/getOrderById',
		dataType: 'json',
		async: false,
		timeout: 30000,
		data: {oid: oid},
		success: function(order) {
			if(isNull(order)){
				return;
			}
			for(f in order){
				var fieldValue = order[f];
				if(f == 'soDesc' && isNull(order[f])){
					fieldValue = '&nbsp;';
				}
				$('#' + f).html(fieldValue);
			}
			var p = order.soPhone;
            wholePhone = p;
            $('#soPhone').html(p.substr(0,3) + '*****' + p.substr(8,3));
			if (order.soStatus == 0){
                $('#wholePhone').show();
			    $('#btnGroup').prepend('<button class="btn" onclick="robServiceOrder(\'' + oid + '\',this)">抢单</button>');
            }
			$('#soStatus').html(getStatus(order.soStatus));
            $('#soPaymentWay').html(getPayWay(order.soPaymentWay));
			//如果有评论
			if(order.isCommented == 1){
				listRateByOrderId(oid);
			}
            if(sessionStorage.getItem(SCS_USER_ID) == order.soUserId){
                $('#issueFinishDateDiv').show();
            }else if (sessionStorage.getItem(SCS_USER_ID) == order.soGetUser) {
                $('#robFinishDateDiv').show();
            }
		},
		error: function() {
			$('.tip-div').show();
			$('#tipText').text('系统繁忙，请稍候再试');
		}
	});
}
/**
 * 加载订单相关的评论
 */
function listRateByOrderId(oid){
	$.ajax({
		type: 'post',
		url: '/app/index/listRateByOrder',
		dataType: 'json',
		async: false,
		timeout: 30000,
		data: {billId: oid},
		success: function(rateData) {
			if(isNull(rateData) || rateData.length < 1){
				return;
			}
            for(var g = 0; g < rateData.length; g ++){
                var divId = rateData[g].robOrGet == 'g' ? 'issuerDiv' : 'robberDiv';
                appendRateInfo(rateData[g],divId);
            }
		}
	});
}
/**
 * 添加评论信息
 */
function appendRateInfo(rate,divId){
	var grade = parseInt(rate.grade), issueRate = getDictionaries(67), robRate = getDictionaries(74),impressStr = '',
    impress = rate.impress, xRows = 0, classStr = '';
    if(impress != null && impress != ''){
        impress = impress.split(',');
        //服务印象行数
        xRows = parseInt(impress.length / 3) + (impress.length % 3 == 0 ? 0 : 1);
        for(var x = 0; x < impress.length; x ++){
            var impressValue = '';
            for (var g = 0; g < issueRate.length; g ++){
                if (impress[x] == issueRate[g].id){
                    impressValue = issueRate[g].dicName;
                }
            }
            for (var g = 0; g < robRate.length; g ++){
                if (impress[x] == robRate[g].id){
                    impressValue = robRate[g].dicName;
                }
            }
            classStr = (x + 1) % 3 == 0 ? 'style="margin-right: 0;"' : 'class="left-evaluate"';
            impressStr += '<li ' + classStr + ' data-impression="' + (x + 1) + '">' + impressValue + '</li>';
        }
    }
	var rateStr = '<div id="' + divId + 'Star" class="evaluate-star"></div><br>' +
         '<div class="order-evaluation-checkbox"><ul class="clearfix">' + impressStr + '</ul></div>' +
         '<div style="margin-top: ' + (xRows * 0.6 + 0.41) + 'rem;">' + rate.rateContent + '</div>';
	$('#' + divId).empty().append(rateStr);
    for(var i = 0; i < 5; i ++){
        var fsId = divId + 'fiveStar' + i;
        $('#' + divId + 'Star').append('<span id="' + fsId + '" class="star-five"></span>');
        if(i < grade){
            $('#' + fsId).css({'color': 'red','border-bottom': '0.23rem  solid red'})
                .append('<style>#' + fsId + ':before{border-bottom: 0.26rem solid red;}#' + fsId + ':after{color: red;border-bottom: 0.23rem solid red;}</style>');
        }
    }
    $('#' + divId + 'Star').append('<em class="level"></em>');
}
/**
 * 抢单
 * @param billNumber
 * @returns
 */
function robServiceOrder(billNumber,btnRoObj){
    var roObj = $(btnRoObj);
    roObj.attr('disabled', true);//设置不可用
    roObj.css({'background':'#dfdfdf','color':'black'});
    //不能抢自己发布的订单
    var mUserId = sessionStorage.getItem(SCS_USER_ID), mUserName = sessionStorage.getItem(SCS_USER_NAME);
    //如果没有登录
    if(isNull(mUserId) || isNull(mUserName)){
        popTipShow.confirm('登录确认','您需要先登录才能抢单',['去登录','不去'],function(e){
            if($(e.target).attr('class') != 'ok'){
                this.hide();
                setCanRob(roObj);
                return;
            }
            window.location.href = '/userPages/mobile/mUserLogin.html';
        });
        return;
    }
    popTipShow.confirm('抢单确认','您确定要抢此单吗？',['确 定','取 消'],function(e){
        this.hide();
        if($(e.target).attr('class') != 'ok'){
            this.hide();
            setCanRob(roObj);
            return;
        }
        if (isNull(billNumber)) {
            webTips("抢单失败，请刷新后再试");
            return;
        }
        if(mUserId == $('#issuerUserId_' + billNumber).val()){
            webTips("您不能抢自己发布的订单");
            return;
        }
        webTips('<span>正在抢单中<img src="../../staticFile/images/userIndex/loading.gif" style="width: 1rem;height: 1rem;"></span>',-1);
        $.ajax({
            type : "POST",
            url : '/serviceOrder/robServiceOrder',
            data : {
                userName : mUserName,
                billNumber : billNumber
            },
            dataType : 'json',
            cache : false,
            async: false,
            success : function(result) {
                var msg = '', s = result.errorFlag;
                if ("0" == s && result.success) {
                    msg = '恭喜，抢单成功!';
                    roObj.remove();
                } else {
                    msg = '抢单失败';
                    setCanRob(roObj);
                }
                $(".web_toast").fadeOut();
                webTips(msg);
            },
            error: function() {
                $(".web_toast").fadeOut();
                webTips('抢单失败');
                setCanRob(roObj);
            }
        });
    });
}
function setCanRob(roBtn) {
    roBtn.attr('disabled', false);
    roBtn.css({'background':'url(../../static/images/userIndex/menu-row-tail.gif) center bottom repeat-x','color':'#fff'});
}
//获取状态
function getStatus(statusCode) {
    var statusCodeArray = [0,1,2,3,4,5,6,7],
        statusTextArray = ['未抢','已抢','已完成','已完成','未确认','已取消','已过期','已完成'];
    for (var g = 0; g < statusCodeArray.length; g ++){
        if (statusCode == statusCodeArray[g]){
            return statusTextArray[g];
        }
    }
}
//支付方式
function getPayWay(payWay) {
    var pwCodeArray = [0,1,2],pwTextArray = ['线下','微信','支付宝'];
    for (var g = 0; g < pwCodeArray.length; g ++){
        if (payWay == pwCodeArray[g]){
            return pwTextArray[g];
        }
    }
}
</script>
</head>
<body>
<!-- 发表服务表单 -->
<div id="middleMain" class="middle-main">
    <div class="top-title">服务订单信息</div>
    <div class="service-info">
        <div>
            <span>标&nbsp;题：</span>
            <span id="soName" class="len-text-field"></span>
        </div>
        <div>
            <span>单&nbsp;号：</span>
            <span id="soBillNumber" class="len-text-field"></span>
        </div>
        <div>
            <span>类&nbsp;型：</span>
            <span id="serviceTypeName"></span>
        </div>
        <div>
            <span>状&nbsp;态：</span>
            <span id="soStatus"></span>
        </div>
        <div>
            <span>服&nbsp;务&nbsp;时&nbsp;间：</span>
            <span id="soServiceDate"></span>
        </div>
        <div>
            <span>发&nbsp;布&nbsp;时&nbsp;间：</span>
            <span id="soOrderDate"></span>
        </div>
        <div>
            <span>抢&nbsp;单&nbsp;时&nbsp;间：</span>
            <span id="soRobDate"></span>
        </div>
        <div id="robFinishDateDiv" style="display: none;">
            <span>完&nbsp;成&nbsp;时&nbsp;间：</span>
            <span id="robFinishDate"></span>
        </div>
        <div id="issueFinishDateDiv" style="display: none;">
            <span>完&nbsp;成&nbsp;时&nbsp;间：</span>
            <span id="issueFinishDate"></span>
        </div>
        <div>
            <span>支&nbsp;付&nbsp;方&nbsp;式：</span>
            <span id="soPaymentWay"></span>
        </div>
        <div>
            <span>地&nbsp;址：</span>
            <span id="soAddress" class="len-text-field"></span>
        </div>
        <div>
            <span>距&nbsp;您：</span>
            <span id="distance"></span>
        </div>
        <div>
            <span>电&nbsp;话：</span>
            <span id="soPhone"></span>
            <span id="wholePhone">完整电话</span>
        </div>
        <div>
            <span>金&nbsp;额：</span>
            <span id="soAmount"></span>&nbsp;元
        </div>
        <div id="lenTextDiv">
            <span id="fieldText" class="detail-title">描&nbsp;述：</span>
            <span id="soDesc" class="len-text-field"></span>
        </div>
        <div style="margin-top: 30px;">
            <table id="issuerRateTable" style="word-wrap: break-word; word-break: break-all;width: 100%;">
                <tr>
                    <td>
                        <span id="issuerSpan" style="width: 100%;font-weight:bolder;">发布人评价</span>
                        <div id="issuerDiv" class="issuer-rate">暂无评论</div>
                    </td>
                </tr>
            </table>
        </div>
        <div style="margin-top: 30px;">
            <table id="robberRateTable" style="word-wrap: break-word; word-break: break-all;width: 100%;">
                <tr>
                    <td>
                        <span id="robberSpan" style="width: 100%;font-weight:bolder;">抢单人评价</span>
                        <div id="robberDiv" class="issuer-rate">暂无评论</div>
                    </td>
                </tr>
            </table>
        </div>
        <div id="btnGroup">
            <button class="btn btn-back" onclick="history.back();">返回</button>
        </div>
    </div>
</div>
<div class="tip-div">
	<div id="tipText" class="tip-info"></div>
	<div class="tip-info" style="margin-top:1.2rem;">
		<button id="btnSure" class="btn">确定</button>
	</div>
</div>
</body>
</html>